<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>基础知识</title>
	<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"" rel="stylesheet">
	<link href="./css/underuse.css" rel="stylesheet">
	<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/3.2.3/animate.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<link rel="stylesheet" href="../static/layui/css/layui.css" media="all">
	<link rel="stylesheet" type="text/css" href="../static/css/public.css" />
</head>
<body>
	<!-- 回到顶部 -->
	<div class="topBtn">
		<a href="#top">
			<i class="fa fa-long-arrow-up"></i>
		</a>
	</div>
	<!--右边内容-->
	<div id="app" class="main animated fadeInRight">
		<div class="shadow" v-cloak>
			<div class="Table" v-cloak id="top">
				<div class="TableRow" v-for="(el,index) in list">
					<a class="RowLeft" :href="'#'+el.id"
					:title="el.name"
					>{{el.name}}</a>
					<span class="RowRight">{{el.explain}}</span>
				</div>
			</div>
			<div>
				<h4 id="filter">模糊 filter</h4>
				<pre>
	class="text_shadow"{//前两个参数是x轴和y轴偏移大小，第三个是模糊大小，最后一个是颜色。可以设置多个
		text-shadow: 5px 12px 1px red,-5px -12px 5px yellow;
	}
	&lt; span class="text_shadow"&gt;hello world &lt; /span &gt;
	
	<span class="text_shadow">hello world</span>
	&lt;img src="transition/img/tt.jpg" /&gt;
	.filterImg {
	    filter: blur(4px);//   filter 滤镜 模糊度
	}
	<img src="transition/img/tt.jpg" alt="" class="filterImg">
	&lt;div class="bab"&gt;&lt;/div&gt;
	.bab{
		width: 300px;
		height: 300px;
		opacity:0.3;//div没有内容可以使用,因为字也一起透明
		border: 1px red;
	}	
	
	<div class="bab"></div>
				</pre>
			</div>
			<div>
				<h4 id="a">a 标签 线</h4>
				<pre>
	.line{
		position: relative;
	}
	.line:hover{
		color: #0dafd2;
		box-sizing: border-box;
	}
	.line::after {
		content: "";
		display: block;
		position: absolute;
		border-bottom: 2px solid #0dafd2;
		left: 0;
		width: 0px;
		margin: 0 auto;
		margin-top: 5px;
	}
	.line:hover::after{
		transition: all 0.5s ease;
		width: 100%;
	}
	&lt;span class="line"&gt;公益合作&lt;/span&gt;
	
	<span class="line">公益合作</span>
	&lt;span class="text_decoration"&gt;good morning&lt;/span&gt;
	text_decoration{
		text-decoration: overline;//line-through/underline;
	}	
	<span class="text_decoration">good morning</span>
				</pre>
			</div>
			<div>
				<h4 id="outline">outline</h4>
				<pre>
	&lt;div class="outline"&gt;&lt;/div&gt;
	.outline{
		border: 1px solid #5FB878;
		outline: dashed 5px;
		outline-offset:10px;  //类似于padding
		padding: 10px;
		width: 214px;	
		height: 50px;
	}	
	<div class="outline"></div>
				</pre>
			</div>
			<div>
				<h4 id="linear">linear-gradient</h4>
				<pre>
	&lt;div class="gradient"&gt;&lt;/div&gt;
		.gradient{
			width: 400px;
			height: 100px;
			background: linear-gradient(to right, white 33%,blue 70%,red);
		}	//渐变从左到右，白色占总体的33%，蓝色占剩下的70%，红色就不用写，默认是最后剩下，若是值超出剩下的就相当于重写蓝色
		.deg{
			background: linear-gradient(66deg ,blue 30% , red );
		}//只支持百分比  表示以时钟6点的方向为0°，顺时针方向拉渐变
	（在ps中演示比较容易懂，拉一个圆形或方形，时钟6点的方向为0°，往中心的方向拉渐变就是其效果一样的）
		.percent{
			background: linear-gradient(blue ,red );
		}类似比例的样式
		<div class="gradient" style="background: linear-gradient(to right, white 33%,blue 70%,red);"></div>
		<div class="gradient deg"></div>
		<div class="gradient percent"></div>
				</pre>
			</div>
			
			<div>
				<h4 id="clip">background-clip</h4>
				<p>此属性采用以下值之一：border-box (default) | padding-box | content-box | text</p>
				<img src="./img/171c34077e562347?imageslim" >
			</div>
			<div>
				<h4 id="path">clip-path</h4>
				<p>将一个div设置成矩形</p>
				<pre>	
		div{
			width:200px;
			height:200px;
			background:#061846;
			border-radius:3px;
			clip-path:polygon(
				100% 0,
				100% calc(100% - 15px),
				calc(100% - 15px) 100%,
				0 100%,
				0 0
			)
		}		
		画多边形的方法是从一个多边形的右边顶点坐标开始，按顺时针顺序最后到左边顶点。
		有多少条边就设置多少个坐标，最少是三边行三个坐标点，
				</pre>
			</div>
		</div>
	</div>
	<!--页面加载进度条-->
	<script src="https://cdn.bootcdn.net/ajax/libs/pace/0.5.0/pace.min.js"></script>
	<!--定义数据-->
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.17/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var app = new Vue({
			el: "#app",
			data: function () {
				return {
					list:[
						{name:"filter",id:"filter",explain:'filter 滤镜 模糊度'},
						{name:"a",id:"a",explain:'a 标签 线'},
						{name:"outline",id:"outline",explain:''},
						{name:"linear-gradient",id:"linear",explain:'linear-gradient'},
						{name:"background-clip",id:"clip",explain:' '},
						{name:"clip-path",id:"path",explain:''},
					]
				}
			},
		})
	</script>
</body>

</html>